import ComponentCodePreview from "@/components/app/component-code-preview"
import { PromptInputBasic } from "./prompt-input-basic"
import { PromptInputWithActions } from "./prompt-input-with-actions"

# Prompt Input

An input field that allows users to enter and submit text to an AI model.

## Examples

### Prompt Input basic

<ComponentCodePreview
  component={<PromptInputBasic />}
  filePath="app/docs/prompt-input/prompt-input-basic.tsx"
  classNameComponentContainer="p-8"
/>

### Prompt Input with actions

You can use `PromptInputActions` to add actions with tooltips to the `PromptInput`.

<ComponentCodePreview
  component={<PromptInputWithActions />}
  filePath="app/docs/prompt-input/prompt-input-with-actions.tsx"
  classNameComponentContainer="p-8"
/>

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

<CodeBlock
  code={`npx shadcn add "https://prompt-kit.com/c/prompt-input.json"`}
  language="bash"
/>

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath="components/prompt-kit/prompt-input.tsx" language="tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Component API

### PromptInput

| Prop          | Type                    | Default | Description                                     |
| :------------ | :---------------------- | :------ | :---------------------------------------------- |
| isLoading     | boolean                 | false   | Loading state of the input                      |
| value         | string                  |         | Controlled value of the input                   |
| onValueChange | (value: string) => void |         | Callback when input value changes               |
| maxHeight     | number \| string        | 240     | Maximum height of the textarea in pixels        |
| onSubmit      | () => void              |         | Callback when form is submitted (Enter pressed) |
| children      | React.ReactNode         |         | Child components to render                      |
| className     | string                  |         | Additional CSS classes                          |

### PromptInputTextarea

| Prop            | Type                               | Default | Description                            |
| :-------------- | :--------------------------------- | :------ | :------------------------------------- |
| disableAutosize | boolean                            | false   | Disable automatic height adjustment    |
| className       | string                             |         | Additional CSS classes                 |
| onKeyDown       | (e: KeyboardEvent) => void         |         | Keyboard event handler                 |
| disabled        | boolean                            | false   | Disable the textarea input             |
| ...props        | `React.ComponentProps<"textarea">` |         | All other textarea props are supported |

### PromptInputActions

| Prop      | Type                                   | Default | Description                       |
| :-------- | :------------------------------------- | :------ | :-------------------------------- |
| children  | React.ReactNode                        |         | Child components to render        |
| className | string                                 |         | Additional CSS classes            |
| ...props  | `React.HTMLAttributes<HTMLDivElement>` |         | All other div props are supported |

### PromptInputAction

| Prop      | Type                                   | Default | Description                                     |
| :-------- | :------------------------------------- | :------ | :---------------------------------------------- |
| tooltip   | React.ReactNode                        |         | Content to show in the tooltip                  |
| children  | React.ReactNode                        |         | Child component to trigger the tooltip          |
| className | string                                 |         | Additional CSS classes for the tooltip          |
| side      | "top" \| "bottom" \| "left" \| "right" | "top"   | Position of the tooltip relative to the trigger |
| disabled  | boolean                                | false   | Disable the tooltip trigger                     |
| ...props  | `React.ComponentProps<typeof Tooltip>` |         | All other Tooltip component props are supported |
